<template>
  <div class="pending-list-operation" v-if="getShowOperation.showOperation">
    <span v-if="getShowOperation.showDirection">
      <a v-for="(item, index) in renderOperationList"
         :key="index"
         :title="item.title"
         :class="item.class"
         @click.stop="item.exeFn">
        {{ item.title }}
      </a>
    </span>
    <span v-else>
      <a :title="renderOperationList[0].title"
         :class="renderOperationList[0].class"
         @click.stop="renderOperationList[0].exeFn">
        {{ renderOperationList[0].title }}
      </a>
      <a-dropdown placement="bottomRight">
        <a class="ant-dropdown-link dropdown-link-block"
           @click.stop="(e) => e.preventDefault()">
          {{ $i18n('common.more.label') }}
          <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item v-for="(item, index) in getShowOperation.renderMoreBtn"
                       :key="index">
            <a :title="item.title"
               :class="item.class"
               @click.stop="item.exeFn">
              {{ item.title }}
            </a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </span>
  </div>
</template>

<script>
  export default {
    name: 'OperationRender',
    props: {
      slotData: {
        type: Object,
        default: () => {}
      },
      userId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        renderOperationList: [],
        getShowOperation: {}
      };
    },
    created() {
      // console.log(this.slotData, 'slotDataqueued');
      this.getShowOperation = this.isShowOperation(this.slotData);
      // console.log(this.getShowOperation.showOperation, 'getShowOperation.showOperation');
    },
    methods: {
      isShowOperation(record) {
        this.renderOperationList = [];
        const showOperation =
          record.applicationCategoryKey === 6 && record.createMemberId === this.userId;
        const showEdit = !(
          record.meetingState === 60 ||
          (record.meetingState !== 0 && record.meetingState !== 10 && record.meetingState !== 70)
        );
        const showCancel = record.meetingState === 10 || record.meetingState === 20;
        const showAttend = record.showAttend;
        if (showOperation) {
          if (showEdit) {
            const editObj = {
              title: this.$i18n('common.operate.edit'),
              class: 'opreation-style margin-gap',
              exeFn: this.editMeetingFn
            };
            this.renderOperationList.push(editObj);
          }
          if (showCancel) {
            const cancelObj = {
              title: this.$i18n('common.toolbar.cancel.label'),
              class: 'opreation-style margin-gap',
              exeFn: this.cancelMeetingFn
            };
            this.renderOperationList.push(cancelObj);
          }
          if (showAttend) {
            const attendObj = {
              title: this.$i18n('mt.mtMeeting.operation.btn.joinnow'),
              class: 'opreation-style margin-gap',
              exeFn: this.attendMeeting
            };
            this.renderOperationList.push(attendObj);
          }
        }
        const showDirection = this.renderOperationList.length < 3;
        return {
          showOperation,
          showDirection,
          renderMoreBtn: showDirection ? [] : this.renderOperationList.slice(1)
        };
      },
      editMeetingFn() {
        this.$emit('editMeetingFn', this.slotData);
      },
      cancelMeetingFn() {
        this.$emit('cancelMeetingFn', this.slotData);
      },
      attendMeeting() {
        this.$emit('attendMeeting', this.slotData.objectId);
      }
    }
  };
</script>

<style scoped>
  .dropdown-link-block {
    width: 56px;
    display: inline-block;
    vertical-align: middle;
  }
</style>
